<template>
    <div class="content">
        <div class="cover" @click="toAlbum">
            <u--image
                :src="detail.headerPicture"
                width="750rpx"
                height="422rpx"
                mode="aspectFill"
            ></u--image>
            <div class="mask"></div>
            <div class="number">
                {{ detail.pictureCount || 0 }}张
                <u-icon name="arrow-right" color="#FFFFFF" size="12"></u-icon>
            </div>
        </div>
        <div class="room-introduce">
            <div class="base-info">
                <div class="room-info">
                    <div class="left">
                        <p class="name">
                            {{ detail.name || '' }}
                        </p>
                        <div class="tag-list">
                            <template v-if="detail.labels">
                                <div class="tag-item" v-for="(e, i) in detail.labels" :key="i">
                                    <u-tag
                                        :text="e.name"
                                        :borderColor="e.bcolor"
                                        :bgColor="e.bcolor"
                                        :color="e.fcolor"
                                        size="mini"
                                        type="warning"
                                    ></u-tag>
                                </div>
                            </template>
                        </div>
                    </div>
                    <div class="right" @click="toLocation">
                        <img class="location" src="@/static/images/room/location.png" />
                        <div class="desc">导航</div>
                    </div>
                </div>
                <div class="address-info">
                    <p class="address">
                        {{ detail.address || '' }}
                    </p>
                    <p class="distance" v-if="detail.distance">距您{{ detail.distance }}</p>
                </div>
                <div class="business-info" @click="showBusiness">
                    <div class="left">
                        <div class="sub-item">
                            <img
                                src="@/static/images/common/time.png"
                                style="width: 32rpx; height: 32rpx"
                            />
                            <span class="label">营业时间</span>
                            <span class="value">{{ detail.openingHours || '' }} </span>
                        </div>
                        <div class="sub-item">
                            <img
                                src="@/static/images/common/phone.png"
                                style="width: 32rpx; height: 32rpx"
                            />
                            <span class="label">联系电话</span>
                            <span class="value">{{ detail.phone || '' }}</span>
                        </div>
                    </div>
                    <u-icon name="arrow-right" color="#979797" size="14"></u-icon>
                </div>
                <div class="declare-list">
                    <div class="declare-item">
                        <img class="declare" src="@/static/images/room/declare.png" />
                        优选自习室
                    </div>
                    <div class="declare-item">
                        <img class="declare" src="@/static/images/room/declare.png" />
                        就近推荐
                    </div>
                    <div class="declare-item">
                        <img class="declare" src="@/static/images/room/declare.png" />
                        资质认证
                    </div>
                </div>
                <div class="notice-info" @click="toNotice" v-if="noticeList.length > 0">
                    <div class="left">
                        <div class="sub-item">
                            <img
                                src="@/static/images/room/notice.png"
                                style="width: 34rpx; height: 32rpx"
                            />
                            <span class="label">店铺公告</span>
                            <u-notice-bar
                                :text="noticeList"
                                icon=" "
                                direction="column"
                                bgColor="#fff"
                                color="#2F2F2F"
                                :duration="5000"
                            ></u-notice-bar>
                        </div>
                    </div>
                    <u-icon name="arrow-right" color="#979797" size="14"></u-icon>
                </div>
            </div>
            <div class="tool-list">
                <div class="tool-item" @click="toPath('/pages/package/list?id=' + id)">
                    <img class="image" src="@/static/images/room/package.png" />
                    <p class="name">住宿包</p>
                </div>
                <div class="tool-item" @click="toHotel">
                    <img class="image" src="@/static/images/room/hotel.png" />
                    <p class="name">住宿</p>
                </div>
                <div class="tool-item" @click="isShowWifi = true">
                    <img class="image" src="@/static/images/room/wifi.png" />
                    <p class="name">wifi链接</p>
                </div>
                <div class="tool-item" @click="toPath('/pages/room/question?id=' + id)">
                    <img class="image" src="@/static/images/room/question.png" />
                    <p class="name">常见问题</p>
                </div>
            </div>
            <u-loadmore
                loadmoreText="详情"
                fontSize="24rpx"
                color="#D5D5D5"
                lineColor="#D5D5D5"
                marginTop="20"
                line
            />
            <div class="device-info section">
                <Title name="店内设施" startColor="#8DE97D" endColor="#C9F7B6"></Title>
                <div class="device-list">
                    <div class="device-item" v-for="item in deviceList" :key="item.icon">
                        <img
                            class="icon"
                            v-if="getDeviceImg(item.icon)"
                            :src="getDeviceImg(item.icon)"
                        />
                        <p class="name">{{ item.name }}</p>
                    </div>
                </div>
            </div>
            <div class="service-info section">
                <Title name="提供服务" startColor="#8D7DE9" endColor="#CCB6F7"></Title>
                <div class="service-list">
                    <div class="service-item" v-for="item in serviceList" :key="item.icon">
                        <img
                            class="icon"
                            v-if="getDeviceImg(item.icon)"
                            :src="getDeviceImg(item.icon)"
                        />
                        <p class="name">{{ item.name }}</p>
                    </div>
                </div>
            </div>
            <div class="space-info section">
                <Title name="空间介绍" startColor="#E9B87D" endColor="#F7DBB6"></Title>
                <mp-html :content="spaceIntroduction" v-if="spaceIntroduction" />
            </div>
            <div class="book-info section">
                <Title name="预定须知" startColor="#7DE9DF" endColor="#B6F6F7"></Title>
                <div class="book-list">
                    <div
                        class="book-item"
                        :class="{ active: index === 0 }"
                        v-for="(item, index) in reserveExplain"
                        :key="index"
                    >
                        {{ item }}
                    </div>
                </div>
            </div>
            <div class="card-info section">
                <Title name="体验步骤" startColor="#7DE9DF" endColor="#B6F6F7"></Title>
                <div class="card-list">
                    <div class="card-item" v-for="(item, index) in reserveSeatProcess" :key="index">
                        {{ item }}
                    </div>
                </div>
            </div>
            <u-loadmore
                loadmoreText="找自习 来上岸"
                fontSize="24rpx"
                color="#D5D5D5"
                lineColor="#D5D5D5"
                marginTop="20"
                line
            />
        </div>

        <div class="footer-bar">
            <div class="sub-list">
                <div class="sub-item" @click="toPath('/pages/book/list?id=' + id)">
                    <img class="icon" src="@/static/images/room/book.png" />
                    <p class="name">来访预约</p>
                </div>
                <div
                    class="sub-item"
                    @click="toPath('/pages/coupon/convert?id=' + id + '&name=' + detail.name)"
                >
                    <img class="icon" src="@/static/images/room/shopping.png" />
                    <p class="name">团购验券</p>
                </div>
                <div class="sub-item" @click="toPath('/pages/card/list?id=' + id)">
                    <img class="icon" src="@/static/images/room/card.png" />
                    <p class="name">卡券套餐</p>
                </div>
            </div>
            <u-button
                color="#5428EC"
                size="normal"
                text="预定"
                :customStyle="{
                    width: '204rpx',
                }"
                @click="toReserve"
            ></u-button>
        </div>

        <u-popup
            :show="isShowBusiness"
            closeable
            :round="24"
            @close="isShowBusiness = false"
            @open="open"
        >
            <div class="business-popup">
                <div class="title">
                    <img class="icon" src="@/static/images/common/home.png" />
                    商家信息
                </div>
                <div class="business-info">
                    <div class="room-info">
                        <p class="name">{{ businessInfo.name }}</p>
                        <div class="status">
                            <img class="declare" src="@/static/images/room/declare.png" />
                            已上传认证
                        </div>
                    </div>
                    <div class="policy-list">
                        <div class="policy-item">
                            <img
                                src="@/static/images/common/time.png"
                                style="width: 32rpx; height: 32rpx"
                            />
                            <span class="label">营业时间</span>
                            <span class="value">{{ businessInfo.openingHours }} </span>
                        </div>
                        <div class="policy-item">
                            <img
                                src="@/static/images/common/phone.png"
                                style="width: 32rpx; height: 32rpx"
                            />
                            <span class="label">联系电话</span>
                            <span class="value">{{ businessInfo.phone }}</span>
                        </div>
                    </div>
                    <div class="company-info">
                        <div class="company-item">
                            <span class="label">企业名称</span>
                            <span class="value">{{ businessInfo.enterpriseName }}</span>
                        </div>
                        <div class="company-item">
                            <span class="label">证件号码</span>
                            <span class="value">{{ businessInfo.certificateNo }}</span>
                        </div>
                        <div class="company-item">
                            <span class="label">法人代表</span>
                            <span class="value">{{ businessInfo.legalPerson }}</span>
                        </div>
                        <div class="company-item">
                            <span class="label">有效期限</span>
                            <span class="value">{{
                                formatDate(businessInfo.validityPeriod) === '9999年12月31日'
                                    ? '永久'
                                    : formatDate(businessInfo.validityPeriod)
                            }}</span>
                        </div>
                    </div>
                    <div class="image" @click="showPreview">
                        <u--image
                            :src="businessInfo.qualificationPicture"
                            mode="aspectFill"
                            :lazy-load="true"
                            width="670rpx"
                            height="400rpx"
                        ></u--image>
                    </div>
                </div>
            </div>
        </u-popup>
        <u-popup :show="isShowWifi" mode="center" :round="12">
            <div class="wifi-popup">
                <img class="wifi" src="@/static/images/room/wifi-popup.png" />
                <div class="wifi-name">
                    <span class="label">wifi名</span>
                    <span class="value">{{ detail.wifiName }}</span>
                </div>
                <div class="wifi-pwd">
                    <div class="left">
                        <span class="label">密码</span>
                        <span class="value">{{ detail.wifiPassword }}</span>
                    </div>
                    <u-button
                        size="mini"
                        shape="circle"
                        text="复制密码"
                        @click="copyPwd"
                        :customStyle="{ width: '144rpx', margin: 0 }"
                    ></u-button>
                </div>
                <u-button
                    type="primary"
                    color="#5428EC"
                    text="我知道了"
                    @click="isShowWifi = false"
                    :customStyle="{ width: '100%', marginTop: '34rpx' }"
                ></u-button>
            </div>
        </u-popup>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import Title from '@/components/Title';
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html';
export default {
    name: 'detail',
    components: {
        Title,
        mpHtml,
    },
    data() {
        return {
            id: null,
            noticeList: [],
            deviceList: [],
            serviceList: [],
            businessInfo: {},
            isShowBusiness: false,
            detail: {},
            reserveExplain: [],
            reserveSeatProcess: [],
            spaceIntroduction: null,
            isShowWifi: false,
        };
    },
    onLoad(options) {
        this.id = Number(options.id);
        this.getHallDetail();
        this.getNoticeList();
    },
    methods: {
        getHallDetail() {
            this.$Api.study.main
                .get({
                    longitude: getApp().globalData.longitude,
                    latitude: getApp().globalData.latitude,
                    id: this.id,
                })
                .then(res => {
                    this.detail = res;
                    this.deviceList = res.facilities;
                    this.serviceList = res.services;
                    this.reserveExplain = res.reserveExplain.split('\n');
                    this.reserveSeatProcess = res.reserveSeatProcess.split('\n');
                    this.spaceIntroduction = res.spaceIntroduction.replace(
                        /<img/gi,
                        '<img style="width:100%;"',
                    );
                    this.$store.dispatch('phone', res.phone);
                });
        },
        getNoticeList() {
            this.$Api.study.notice
                .list({
                    studyhallId: this.id,
                })
                .then(res => {
                    this.noticeList = res.map(e => {
                        return e.title;
                    });
                });
        },
        showBusiness() {
            if (this.detail.id) {
                this.$Api.study.business
                    .get({
                        id: this.detail.id,
                    })
                    .then(res => {
                        this.businessInfo = res;
                        this.isShowBusiness = true;
                    });
            }
        },
        getDeviceImg(icon) {
            let url = '';
            try {
                url = require('@/static/images/room/devices/' + icon + '.png');
            } catch (e) {
                url = null;
            }
            return url;
        },
        toAlbum() {
            uni.navigateTo({
                url: '/pages/room/album?id=' + this.id,
            });
        },
        toLocation() {
            uni.openLocation({
                longitude: this.detail.longitude,
                latitude: this.detail.latitude,
                name: this.detail.name,
                address: this.detail.address,
            });
        },
        toPath(url) {
            uni.setStorageSync('delta', 3);
            uni.navigateTo({
                url,
            });
        },
        toHotel() {
            uni.navigateTo({
                url: '/pages/room/hotel?id=' + this.detail.hotelId,
            });
        },
        formatTime(val) {
            return dayjs(val).format('YYYY年MM月DD日 HH:mm:ss');
        },
        formatDate(val) {
            return dayjs(val).format('YYYY年MM月DD日');
        },
        formatDay(val) {
            return dayjs(val).format('MM月DD日');
        },
        toNotice() {
            uni.navigateTo({
                url: '/pages/notice/list?id=' + this.id,
            });
        },
        copyPwd() {
            uni.setClipboardData({
                data: this.detail.wifiPassword,
                success: () => {
                    this.isShowWifi = false;
                    uni.showToast({
                        title: '复制成功',
                        icon: 'none',
                    });
                },
            });
        },
        showPreview() {
            uni.previewImage({
                urls: [this.businessInfo.qualificationPicture],
            });
        },
        toReserve() {
            uni.navigateTo({
                url: '/pages/reserve/settle?id=' + this.id,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    .cover {
        width: 100%;
        height: 422rpx;
        position: relative;
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #212121 100%);
        }
        .number {
            font-size: 28rpx;
            color: #ffffff;
            position: absolute;
            z-index: 100;
            right: 54rpx;
            bottom: 90rpx;
            padding: 6rpx 14rpx 6rpx 22rpx;
            background: rgba(0, 0, 0, 0.57);
            border-radius: 50rpx;
            @include flexBox(center, center);
        }
    }
    .room-introduce {
        width: 690rpx;
        margin: -70rpx auto 0;
        position: relative;
        padding-bottom: 140rpx;
        .base-info {
            width: 100%;
            padding: 32rpx;
            background: #fff;
            border-radius: 24rpx;
            box-sizing: border-box;
            .room-info {
                @include flexBox(space-between, flex-start);
                .left {
                    flex: 1;
                    margin-right: 20rpx;
                    .name {
                        font-size: 40rpx;
                        font-weight: 600;
                        color: #2f2f2f;
                        @include ellipsis(2);
                    }
                    .tag-list {
                        @include flexBox(flex-start, flex-start, row, wrap);
                        .tag-item {
                            margin-top: 12rpx;
                            margin-right: 10rpx;
                        }
                    }
                }
                .right {
                    @include flexBox(center, center, column);
                    .location {
                        width: 48rpx;
                        height: 48rpx;
                    }
                    .desc {
                        font-size: 20rpx;
                        color: #2f2f2f;
                        margin-top: 12rpx;
                    }
                }
            }
            .address-info {
                margin-top: 12rpx;
                padding-bottom: 16rpx;
                border-bottom: 1rpx solid #e5e5e5;
                @include flexBox(space-between, center);
                .address {
                    font-size: 28rpx;
                    color: #5c5c5c;
                    flex: 1;
                    margin-right: 20rpx;
                    @include ellipsis(1);
                }
                .distance {
                    font-size: 24rpx;
                    color: #898989;
                }
            }
            .business-info,
            .notice-info {
                width: 100%;
                @include flexBox(space-between, center);
                .left {
                    flex: 1;
                    .sub-item {
                        @include flexBox(flex-start, center);
                        .label {
                            font-size: 24rpx;
                            color: #898989;
                            margin-left: 10rpx;
                        }
                        .value {
                            font-size: 24rpx;
                            color: #2f2f2f;
                            margin-left: 10rpx;
                        }
                    }
                }
            }
            .business-info {
                .sub-item {
                    margin: 20rpx 0;
                }
            }
            .declare-list {
                width: 100%;
                height: 60rpx;
                background: rgba(212, 212, 212, 0.2);
                @include flexBox(space-around, center);
                .declare-item {
                    font-size: 20rpx;
                    color: #49b25b;
                    @include flexBox(center, center);
                    .declare {
                        width: 32rpx;
                        height: 32rpx;
                    }
                }
            }
            .notice-info {
                margin-top: 32rpx;
                padding-top: 12rpx;
                border-top: 1rpx solid #e5e5e5;
            }
        }
        .tool-list {
            width: 100%;
            padding: 20rpx;
            margin-top: 20rpx;
            background: #ffffff;
            border-radius: 24rpx;
            box-sizing: border-box;
            @include flexBox(space-around, center);
            .tool-item {
                @include flexBox(center, center, column);
                .image {
                    width: 84rpx;
                    height: 84rpx;
                }
                .name {
                    color: #2f2f2f;
                    font-size: 24rpx;
                }
            }
        }
        .section {
            width: 100%;
            margin-top: 20rpx;
            background: #ffffff;
            border-radius: 24rpx;
            padding: 26rpx 32rpx;
            box-sizing: border-box;
        }
        .device-info {
            margin-top: 40rpx;
            .device-list {
                margin-top: 24rpx;
                @include flexBox(flex-start, flex-start, row, wrap);
                .device-item {
                    width: 33%;
                    margin-bottom: 12rpx;
                    @include flexBox(flex-start, center);
                    .icon {
                        width: 72rpx;
                        height: 72rpx;
                    }
                    .name {
                        font-size: 24rpx;
                        color: #2f2f2f;
                        margin-left: 20rpx;
                    }
                }
            }
        }
        .service-info {
            .service-list {
                margin-top: 24rpx;
                @include flexBox(flex-start, flex-start, row, wrap);
                .service-item {
                    width: 33%;
                    margin-bottom: 12rpx;
                    @include flexBox(flex-start, center);
                    .icon {
                        width: 72rpx;
                        height: 72rpx;
                    }
                    .name {
                        font-size: 24rpx;
                        color: #2f2f2f;
                        margin-left: 20rpx;
                    }
                }
            }
        }
        .space-info {
            .title {
                font-size: 28rpx;
                color: #2f2f2f;
                line-height: 40rpx;
                margin: 16rpx 0;
            }
            .img {
                width: 100%;
                height: 388rpx;
                background: #ccc;
            }
        }
        .book-info {
            .book-list {
                margin-top: 24rpx;
                .book-item {
                    color: #2f2f2f;
                    font-size: 24rpx;
                    line-height: 34rpx;
                    margin-bottom: 40rpx;
                    &:last-child {
                        margin-bottom: 0;
                    }
                    &.active {
                        color: #ff5518;
                    }
                }
            }
        }
        .card-info {
            .card-list {
                margin-top: 24rpx;
                .card-item {
                    padding: 12rpx 24rpx;
                    background: rgba(145, 114, 252, 0.2);
                    color: #2f2f2f;
                    font-size: 24rpx;
                    line-height: 34rpx;
                    margin-bottom: 20rpx;
                    border: 1rpx dashed #9172fc;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
    .footer-bar {
        width: 100%;
        background: #fff;
        padding: 16rpx 30rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        z-index: 1000;
        @include flexBox(space-between, center);
        .sub-list {
            flex: 1;
            margin-right: 50rpx;
            @include flexBox(space-around, center);
            .sub-item {
                @include flexBox(center, center, column);
                .icon {
                    width: 64rpx;
                    height: 64rpx;
                }
                .name {
                    font-size: 24rpx;
                    color: #5c5c5c;
                    white-space: nowrap;
                }
            }
            .btn {
                width: 204rpx;
            }
        }
    }
}
.business-popup {
    .title {
        padding: 20rpx 40rpx;
        border-bottom: 1rpx solid #f1f1f1;
        @include flexBox(flex-start, center);
        .icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
        }
    }
    .business-info {
        min-height: 54vh;
        max-height: 66vh;
        overflow-y: auto;
        padding: 20rpx 0;
        .room-info {
            padding: 32rpx 40rpx;
            @include flexBox(space-between, center);
            .name {
                font-size: 32rpx;
                font-weight: 600;
                color: #2f2f2f;
            }
            .status {
                font-size: 24rpx;
                color: #109a28;
                @include flexBox(center, center);
                .declare {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 14rpx;
                }
            }
        }
        .policy-list {
            margin: 20rpx 0;
            padding: 36rpx 40rpx;
            border-top: 20rpx solid #f6f6f6;
            border-bottom: 20rpx solid #f6f6f6;
            .policy-item {
                margin: 16rpx 0;
                @include flexBox(flex-start, center);
                .label {
                    margin-left: 16rpx;
                    font-size: 28rpx;
                    color: #898989;
                }
                .value {
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    color: #2f2f2f;
                }
            }
        }
        .company-info {
            padding: 20rpx 40rpx;
            .company-item {
                margin-bottom: 20rpx;
                @include flexBox(flex-start, center);
                .label {
                    font-size: 28rpx;
                    color: #898989;
                }
                .value {
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    color: #2f2f2f;
                }
            }
        }
        .image {
            margin: 0 auto;
            width: 670rpx;
            height: 400rpx;
        }
    }
}
.wifi-popup {
    width: 570rpx;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
    @include flexBox(center, center, column);
    .wifi {
        width: 272rpx;
        height: 210rpx;
    }
    .wifi-name {
        margin-top: 48rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #e5e5e5;
        font-size: 28rpx;
        color: #2f2f2f;
        width: 100%;
        @include flexBox(flex-start, center);
    }
    .wifi-pwd {
        margin-top: 30rpx;
        font-size: 28rpx;
        color: #2f2f2f;
        width: 100%;
        @include flexBox(space-between, center);
    }
    .label {
        font-weight: 600;
    }
    .value {
        margin-left: 12rpx;
    }
}
</style>
